<template>
	<view class="refuge-page" v-if="Object.keys(data).length>0">
		<view class="t">{{data.title}}</view>
		<view class="m20">{{data.dosc}}</view>
		<view class="m20">{{data.content.title}}</view>
		<template v-for="(item,index) in data.content.list" :key="index">
			
			<view class="m20">{{index+1}} 、{{item.title}} <text v-if="item.f" class="a">重要</text> </view>
		</template>
		<template v-for="(item,k) in data.list" :key="'k'+k">
			<view :class="['iconfont', item.icon,'icon','m20']"></view>
			<view class="t m20">{{item.title}}</view>
			<view class="m20">{{item.des}}</view>
			<template v-for="(val,j) in item.content" :key="'j'+j">
				<view class="m20 f" v-if="val"> <text class="c"></text> <text class="flex1">{{val}}</text></view>
			</template>
			<view class="m20">{{item.des1}}</view>
			<template v-for="(val,i) in item.des2" :key="'i'+i">
				<view class="m20"><text class="l"></text> {{val.title}}</view>
				<view class="m20 f" v-if="val.des"><text class="c"></text> <text class="flex1">{{val.des}}</text> </view>
				<template v-for="(v,c) in val.content" :key="c">
					<view class="m20 f" v-if="v"><text class="c"></text> <text class="flex1">{{v}}</text> </view>
				</template>
			</template>
		</template>
		<view class="tt ">一定记住，图片很漂亮价格又很低的房子很可能是虚假信息。</view>
		<view class="tt m20">最后但最重要，找房子再急都要淡定。</view>
	</view>
</template>

<script>
	import {  ref } from "vue"
import requestApi from '../../utils/api.js'
	export default {
		setup(){
			const data = ref({})
			const init = ()=>{
				const params = {
					type:'refuge'
				}
				requestApi('refuge',params).then(res=>{
					console.log(res);
					if(res.result.code===200){
						data.value = res.result.data[0]
					}else{
						uni.showToast({
							title:res.result.message,
							icon:'none'
						})
					}
				})
			}
			init()
			return{
				data
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.refuge-page{
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 20upx 40upx;
		overflow: auto;
		color: #757575;
		.t{
			text-align: center;
			font-weight: bold;
			font-size: 40upx;
			margin-bottom: 20upx;
		}
		.m20{
			margin: 20upx 0;
		}
		.icon{
			text-align: center;
			font-size: 80upx;
			color: #ff4c42;
		}
		.l{
			display: inline-block;
			width: 10upx;
			height: 30upx;
			background-color: #ff4c42;
		}
		.a{
			display: inline-block;
			padding: 4upx 10upx;
			font-size: 16upx;
			border-radius: 8upx;
			color: #ff4c42;
			background-color: #f5f5f5;
		}
		.c{
			display: inline-block;
			width: 8upx;
			height: 8upx;
			background-color: #000;
			border-radius: 50%;
			margin: 14upx 20upx;
		}
		.f{
			display: flex;
			align-items: flex-start;
			
		}
		.tt{
			font-weight: bold;
			color: #000;
			
		}
	}
</style>
